import React, { useEffect, useState } from 'react'
import { Popover, Image } from "antd"
import { useRouter } from 'next/router';

const Headers = () => {
  let router = useRouter()
  const content = (
    <div>
      <span
        style={{
          cursor: "pointer"
        }}
        onClick={() => handelclick()}
      >退出登录</span>
    </div>
  );
  let [name, setName] = useState("XXX")
  let [img, setimg] = useState("https://img0.baidu.com/it/u=1320214812,4057039843&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=360")
  //退出登录
  const handelclick = () => {
    localStorage.removeItem("token")
    localStorage.removeItem("user")
    location.reload()
  }
  //获取用户信息
  useEffect(() => {
    let user = localStorage.getItem("user") || "";
    if (user != "") {
      let userinfo = JSON.parse(user);
      setName(userinfo.name)
      setimg(userinfo.headerimg)
    }
  }, [])
  return (
    <div style={{
      width: "100%",
      height: "64px",
      background: '#001529',
      color: "#fff",
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      padding: "0 24px"
    }}>
      <div
        style={{
          cursor: "pointer",
          fontWeight: "bold",
          fontSize: "19px"
        }}
        onClick={() => {
          router.push("/")
          sessionStorage.removeItem("selectkey")
        }}
      >
        宏烨找房后台管理系统
      </div>
      <div style={{
        cursor: "pointer"
      }}>

        <Popover placement="bottom" content={content} trigger="click">
          <div
          style={{
              width:"160px",
              height:"100%",
              display:"flex",
              justifyContent:"center",
              alignItems:"center"
          }}>
            <img src={img} style={{
              width: "40px",
              height: "40px",
              borderRadius: "20px",
              display: "inline-block"
            }} alt="" />
            姓名：{name}
          </div>
        </Popover>
      </div>
    </div>
  )
}

export default Headers